<!-- 对 button 组件的编辑 -->
<template>
  <div class="button-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="设置" name="1">
            <el-form :label-width="formLabelWidth">
              <el-form-item label="选择文件" style="margin-bottom:8px;">
                <el-button type="primary" size="small" @click.stop="chooseFile">点击上传文件</el-button>
                <span class="spn">仅支持编码为H264，格式为MP4格式的视频，最大为{{size}}M。</span>
                <div v-if="videoInfo && videoInfo.id">
                  <div class="dffr">
                    <div class="file-image-icon">
                      <img :src="require('@/assets/images/icon_suffix/'+videoInfo.suffix+'.png')" alt="file-icon"
                        style="max-width:40px;max-height:40px;">
                    </div>
                    <div class="file-name black">
                      {{videoInfo.originalFilename}}
                    </div>
                    <div class="opt">
                      <el-button type="text" @click.stop="deleteFile"><i class="el-icon-delete"></i></el-button>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="封面图片" style="margin-bottom:0;">
                <el-button type="primary" size="small" @click.stop="chooseImage">点击上传图片</el-button>
                <span class="spn"></span>
                <div>
                  <div class="img-box-u">
                    <el-image class="image-size-limit" :src="data.config.img.src" @load="imageLoad">
                      <div slot="error" class="image-slot">
                        <span style="color:#656565;">图片不存在...</span>
                      </div>
                    </el-image>
                    <div class="delete-u" v-if="data.config.img.src"><i @click.stop="deleteImage"
                        class="el-icon-delete"></i></div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="显示位置" style="margin-bottom:0px;">
                <el-radio-group v-model="data.config.textAlign">
                  <el-radio :label="'left'">靠左</el-radio>
                  <el-radio :label="'center'">居中</el-radio>
                  <el-radio :label="'right'">靠右</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="视频宽度" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                    <el-input @blur="widthBlur" size="mini" style="width:100px;" v-model="data.config.width"
                      maxlength="12" placeholder="100%"></el-input>
                    <span class="spn">px或百分比</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="视频比例" style="margin-bottom:0px;">
                    <el-select style="width: 100px;" size="mini" v-model="data.config.ratio" placeholder="请选择">
                      <el-option label="16:9" :value="'16:9'"></el-option>
                      <el-option label="4:3" :value="'4:3'"></el-option>
                      <el-option label="1:1" :value="'1:1'"></el-option>
                      <el-option label="2:1" :value="'2:1'"></el-option>
                      <el-option label="3:4" :value="'3:4'"></el-option>
                      <el-option label="9:16" :value="'9:16'"></el-option>
                      <el-option label="2.35:1" :value="'2.35:1'"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="自动播放" style="margin-bottom:0px;">
                    <el-radio-group v-model="data.config.autoPlay">
                      <el-radio :label="0">关闭</el-radio>
                      <el-radio :label="1">开启</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="循环播放" style="margin-bottom:0px;">
                    <el-radio-group v-model="data.config.loop">
                      <el-radio :label="0">关闭</el-radio>
                      <el-radio :label="1">开启</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>

    <!-- 选择资源文件 -->
    <ChooseRepertory ref="chooseRepertory" />
  </div>
</template>

<script>
import Color from '@/components/common/design/dialog/component/formitem/Color.vue'
import FontFamily from '@/components/common/design/dialog/component/formitem/FontFamily.vue'
import FontWeight from '@/components/common/design/dialog/component/formitem/FontWeight.vue'
import FontSize from '@/components/common/design/dialog/component/formitem/FontSize.vue'
import FontStyle from '@/components/common/design/dialog/component/formitem/FontStyle.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
import * as WindowType from '@/config/windowtype.js'
import * as functions from '@/core/functions.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTVIDEO, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data
      if (this.data && this.data.config && !this.data.config.textAlign) {
        this.data.config.textAlign = 'left'
      }
      this.videoInfo = bjComponent._other.video.hrepertory
      this.bgImgInfo = bjComponent._other.background.hrepertory

      functions.hostSetup().then(setup => {
        if (setup && setup.videoupload) {
          this.size = parseFloat(setup.videoupload / (1024 * 1024)).toFixed(1)
        } else {
          this.size = 0
        }
      })
    })
  },
  mounted () {
  },
  data () {
    return {
      dialogShow: false,
      activeName: '1',
      formLabelWidth: '120px',
      name: '本地视频',
      bjComponent: null,
      data: null,
      // 错误信息
      errorMessage: '',
      videoInfo: {},
      bgImgInfo: {},
      size: 0
    }
  },
  methods: {
    // 图片加载完成触发居中
    imageLoad () {
      this.$refs['settingDialog'].positionCenter()
    },
    // 选择视频资源文件
    chooseFile () {
      this.$refs['chooseRepertory'].show({ title: '选择文件', where: { type: [5] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          let repertory = repertoryList[0]
          this.bjComponent._other.video.hrepertory = _.cloneDeep(repertory)
          this.videoInfo = _.cloneDeep(repertory)
          let src = functions.getRepertoryVideoSrcByHostRepertory(repertory)
          this.data.config.video.src = src
        }
      })
    },
    // 选择封面图片
    chooseImage () {
      this.$refs['chooseRepertory'].show({ title: '选择文件', where: { type: [0] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          let repertory = repertoryList[0]
          this.bjComponent._other.background.hrepertory = _.cloneDeep(repertory)
          this.bgImgInfo = _.cloneDeep(repertory)
          let src = functions.getRepertoryImageSrcByHostRepertory(repertory)
          this.data.config.img.src = src
        }
      })
    },
    // 显示错误以及 focus
    showErrorMessage (errorMessage) {
      this.errorMessage = errorMessage
    },
    // 删除 视频
    deleteFile () {
      this.bjComponent._other.video.hrepertory = null
      this.videoInfo = {}
      this.data.config.video.src = ''
    },
    // 删除 封面图片
    deleteImage () {
      this.bjComponent._other.background.hrepertory = null
      this.bgImgInfo = {}
      this.data.config.img.src = ''
    },
    widthBlur () {
      if (/^(\d)+$/.test(this.data.config.width)) {
        this.data.config.width = this.data.config.width + 'px'
      } else if (/^(\d)+(%|px)$/.test(this.data.config.width)) {
        this.data.config.width = this.data.config.width
      } else {
        this.data.config.width = ''
      }
    },
    close () {
      this.dialogShow = false
      this.activeName = '1'
      this.bjComponent = null
      this.data = null
      this.errorMessage = ''
      this.videoInfo = {}
      this.bgImgInfo = {}
      this.size = 0
    },
    saveclose () {
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    ChooseRepertory,
    Color,
    FontFamily,
    FontWeight,
    FontSize,
    FontStyle
  }
}

</script>

<style scoped lang="scss">
.edit-container-u {
  width: 840px;
  min-height: 410px;
  min-height: calc(100vh - 300px);
}
.spn {
  margin-left: 15px;
  color: #666;
  font-size: 12px;
}
.dffr {
  margin-top: 5px;
  line-height: 1.3;
  .opt {
    margin-left: 28px;
    .el-icon-delete {
      font-size: 18px;
      &:hover {
        color: #0480fb;
      }
    }
  }
}
.file-name {
  margin-left: 10px;
  margin-top: 8px;
  line-height: 2;
}
.image-size-limit /deep/ img {
  max-width: 280px;
  max-height: 120px;
}
.img-box-u {
  display: inline-block;
  position: relative;
  .delete-u {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    background: #409eff;
    color: #fff;
    text-align: right;
    font-size: 16px;
    padding: 0 6px;
    opacity: 0;
    cursor: pointer;
    line-height: 1.8;
  }
  &:hover .delete-u {
    opacity: 1;
  }
}
</style>
